<template>
  <view class="container">
    <view class="header">
      <view class="header-left">
        <image src="/static/back.png" @click="back" />
      </view>
      <view class="header-t">
        <view class="header-title"> 智能创作助手 </view>
        <view class="header-title2"> AI对话式文章生成 </view>
      </view>
    </view>
    //历史
    <view
      class="chat history"
      :style="'padding-top:15px;padding-bottom:' + bottomInputBoxHeight + 'px;'"
      v-if="historyList"
    >
      <block v-for="(item, index) in historyList" :key="item.id">
        <view v-show="item.type === 'user'  && index!=0" class="my" >
          <text class="mychat" :selectable="true" >{{ item.content }}</text>
          <image class="avater" src="/static/tx.jpg" />
        </view>
        <view v-if="item.type === 'gpt'" class="gpt">
          <image class="avater" :src="defaultImgUrl ? defaultImgUrl : '/static/ai.png'" />
          <view class="replay-content">
            <text user-select :selectable="true" class="gptchat">{{
              item.content
            }}</text>
            <view class="loading" v-if="item.content == 'AI正在思考中...'">
              <van-loading type="spinner" color="#30b89c" />
            </view>
            <block v-if="item.type == 'gpt'">
              <view @click="editChat(item.content)" class="editChatBox">
                <image src="/static/editChat.png" />
              </view>
            </block>
          </view>
        </view>
      </block>
    </view>

    <view
      class="chat"
      :style="'padding-top:15px;padding-bottom:' + bottomInputBoxHeight + 'px;'"
    >
      <block v-for="(item, index) in chatList" :key="item.id">
        <view v-show="item.type === 'user'" class="my">
          <text class="mychat" :selectable="true">{{ item.content }}</text>
          <image class="avater" src="/static/tx.jpg" />
        </view>
        <view v-if="item.type === 'gpt'" class="gpt">
          <image class="avater" :src="defaultImgUrl ? defaultImgUrl : '/static/ai.png'" />
          <view class="replay-content">
            <text user-select :selectable="true" class="gptchat">{{
              item.content
            }}</text>
            <view class="loading" v-if="item.content == 'AI正在思考中...'">
              <van-loading type="spinner" color="#30b89c" />
            </view>
            <block v-if="!(index == 0 && item.type == 'gpt')">
              <view @click="editChat(item.content)" class="editChatBox">
                <image src="/static/editChat.png" />
              </view>
            </block>
          </view>
        </view>
      </block>
    </view>
    <view class="bottom">
      <scroll-view
        class="suggest"
        :scroll-x="true"
        :scroll-with-animation="true"
        :enhanced="true"
        :show-scrollbar="false"
      >
        <view
          class="suggestItem"
          v-for="(item, index) in suggests"
          :key="index"
          bindtap="adoptSuggest"
          @click="handleClickSuggest(index)"
        >
          {{ item.title }}
        </view>
      </scroll-view>

      <!-- <view bind:tap="editPopup" class="unfold" :style="inputFocus?'display:block':'display:none'">
             <image src="/static/unfold.png" />
         </view> -->
      <view class="inputBox">
        <image @click="deletePopup" src="/static/delete.png" />
        <view class="input">
          <input
            v-model="sendInput"
            placeholder="请输入您的进一步需求"
            inputfocus="inputFocus"
            inputblur="inputFocus"
          />
        </view>
        <view class="send" bind:tap="send" @click="handleClickSend">
          <image src="/static/send.png" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
	defaultImgUrl: '',
		// ai图片如果有图片传递过来就改变否则是默认的
      content: "",
      historyList: [],
      params: {
        chat_id: "",
      },
      sendInput: "",
      chat_id: "",
      bottomInputBoxHeight: 0,
      chatList: [],
      suggests: [
        {
          title: "再完善一下",
          detail: "能以你生成的文章为基础进一步完善一下吗？",
        },
        {
          title: "换一个立意",
          detail: "请换一个立意再写一篇",
        },
        {
          title: "文章润色",
          detail:
            "请以你生成的文章为基础进一步润色一下吗，要求使文章读起来有感情，生动形象。",
        },
        {
          title: "写一个标题",
          detail: "请帮我以你生成的文章为基础写一个标题",
        },
        {
          title: "缩减字数",
          detail: "请你在不改变立意的条件下，精简一下文章字数。",
        },
      ],
    };
  },
  methods: {
    deletePopup() {
      this.sendInput = "";
    },
    editChat(e) {
      uni.setClipboardData({
        data: e,
        success: function () {
          // console.log('success'); //调用方法成功
          uni.showToast({
            title: "已复制",
            duration: 2000,
            icon: "success",
          });
        },
      });
    },
    back() {
	
      uni.navigateBack();
    },
    handleClickSend() {
	
      const content = this.sendInput;
      const item = {
        type: "user",
        content: this.sendInput,
      };
      this.chatList.push(item);
      this.sendRequest(content);
	  this.sendInput=""
    },
    handleClickSuggest(index) {
		
      const item = {
        type: "user",
        content: this.suggests[index].title,
      };
      this.chatList.push(item);
      this.sendRequest(this.suggests[index].detail);
    },
    sendRequest(content) {
		
      const uid = uni.getStorageSync("uid");
      const sendInfo = {
        uid,
        content,
        chat_id: this.params.chat_id || "new",
        type: "chat",
      };
      uni.request({
        url: "http://localhost:3031/ai",
        data: sendInfo,
        method: "POST",
        success: (res) => {
          // if (res.data.code === 200) {
			  console.log(res);
            const chatItem = {
              id: 1,
              role: 1,
              content: res.data.choices[0].message.content,
              date: res.data.date,
              type: "gpt",
            };
			
            this.params.chat_id = res.data.chat_id;
            this.chatList.push(chatItem);
          // }
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
  },
  onLoad(option) {
	  
	 
	  let data = uni.getStorageSync('roleItem');
	  if (typeof data === 'undefined') {
		  // 从聊天记录页面进来
	    console.log('roleItem数据不存在');
	  } else {
	    this.defaultImgUrl=data.roleImg
		// 第一条聊天记录
	  }
    console.log(option);
	console.log(this.flag);
    // 获取底部输入盒子高度
    // let query0 = uni.createSelectorQuery();
    // query0.select('.bottom').boundingClientRect(rect => {
    //   this.bottomInputBoxHeight = rect.height;
    // }).exec();
    // 详情页面通过 onLoad生命周期中接收到传递过来的参数 id

    // console.log('上一个页面传递过来的参数', option.chat_id)

    this.params.chat_id = option.chat_id;
	if(option.chat){this.params.chat_id = option.chat}
    this.content = option.content;
    uni.showLoading({
      title: "加载中",
    });
    uni.request({
      url: "http://localhost:3031/getChat",
      data: this.params,
      method: "POST",
      success: (res) => {
        this.history = 1;
        uni.hideLoading();
        if (res.data.code === 200) {
          this.historyList = res.data.data;
        }
      },
      fail: (err) => {
        console.log(err);
      },
    });
    if (this.content) {
      const content = this.content;
      const item = {
        type: "user",
        content: this.content,
      };
      this.chatList.push(item);
      this.sendRequest(this.content);
    }
  },
  onUnload() {
     uni.removeStorageSync('roleItem');
      }
};
</script>

<style lang="less" scoped>
page {
  background-color: #f3f1f1;
}

.container {
  width: 100vw;
  // height: 100vh;
  // padding-top: 200rpx;
}

.header {
  z-index: 999;
  position: fixed;
  top: 0rpx;
  display: flex;
  /* justify-content: space-between; */
  height: 110rpx;
  align-items: center;
  width: 100%;
  /* background-color: #fff; */
  backdrop-filter: blur(5px);
  /* 模糊半径为5像素 */
  background-color: rgba(255, 255, 255, 0.6);
  /* 背景颜色设置为白色，透明度为0.5 */
  border-radius: 10px;
}

.header-left {
  display: flex;
  align-items: center;
  padding-left: 30rpx;
}

.header-title {
  font-size: 32rpx;
  margin-left: 10rpx;
}

.header-title2 {
  font-size: 26rpx;
  margin-left: 10rpx;
  color: rgba(0, 0, 0, 0.3);
}

.header image {
  width: 45rpx;
  height: 45rpx;
  padding: 10rpx;
}

.chat {
  // height: 50vh;
  padding-bottom: 12vh !important;
  padding-top: 3vh !important;
  box-sizing: border-box;
}
.history {
  padding-bottom: 1vh !important;
  // border-bottom: 1px solid #ccc;
}

.my {
  /* width: 100%; */
  display: flex;
  justify-content: flex-end;
  margin: 35rpx;
}

.mychat {
  border-radius: 24rpx;
  background: rgba(48, 184, 156, 1);
  padding: 20rpx 30rpx;
  color: #fff;
  margin: 0 20rpx 0 0;
  line-height: 1.6;
  word-break: break-all;
  word-wrap: break-word;
}

.gpt {
  /* width: 100%; */
  display: flex;
  margin: 35rpx;
}

.replay-content {
  /* flex: 1; */
  background: #fff;
  border-radius: 24rpx;
  margin: 0 0 0 20rpx;
  padding: 20rpx 30rpx;
}

.loading {
  text-align: center;
  margin: 20rpx 0;
}

.gptchat {
  color: #000000;
  line-height: 1.6;
  word-break: break-all;
  word-wrap: break-word;
}

.chat .avater {
  flex-shrink: 0;
  width: 75rpx;
  height: 75rpx;
  border-radius: 50%;
}

.editChatBox {
  padding-top: 20rpx;
  text-align: center;
  margin-top: 20rpx;
  border-top: 2rpx dashed #00000022;
}

.editChatBox image {
  width: 50rpx;
  height: 50rpx;
}

.unfold {
  display: none;
  width: 100%;
  text-align: center;
  /* padding: 20rpx 0; */
}

.unfold > image {
  height: 50rpx;
  width: 50rpx;
}

.bottom {
  transition: all 0.2s;
  position: fixed;
  width: 100vw;
  /* height: 110rpx; */
  padding: 20rpx 0;
  bottom: 0;
  /* background-color: #fff; */
  backdrop-filter: blur(5px);
  /* 模糊半径为5像素 */
  background-color: rgba(255, 255, 255, 0.6);
  /* 背景颜色设置为白色，透明度为0.5 */
  border-radius: 10px;
}

.inputBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin: 0 30rpx; */
}

.inputBox input {
  height: 70rpx;
}

.bottom image {
  width: 50rpx;
  height: 50rpx;
}

.inputBox > image {
  margin: 0 30rpx;
}

.bottom .input {
  border-radius: 15px;
  background: #ffffff;
  padding: 10rpx 20rpx;
  flex: 1;
  font-size: 31rpx;
}

.send {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80rpx;
  height: 80rpx;
  background: rgba(0, 186, 173, 1);
  border-radius: 50%;
  margin: 0 30rpx;
}

.suggest {
  width: 100%;
  overflow: hidden;
  display: flex;
  white-space: nowrap;
  /* padding: 0 30rpx; */
  margin-bottom: 20rpx;
}

.suggestItem {
  display: inline-block;
  margin-right: 20rpx;
  font-size: 28rpx;
  padding: 10rpx 20rpx;
  color: #fff;
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.4);
}

.suggestItem:nth-child(1) {
  margin-left: 20rpx;
}

/* 弹出层 */

.popup-content {
  padding: 40rpx;
}

.popup-header {
  display: flex;
  height: 80rpx;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
  padding-bottom: 15rpx;
}

.popup-header-title {
  font-size: 35rpx;
  font-weight: 600;
}

.notice-content {
  margin: 40rpx 0;
  font-size: 34rpx;
}

.popupTnput {
  z-index: 99;
  padding: 30rpx 0;
  /* margin: 0rpx 50rpx; */
  border-radius: 5px;
  min-height: 50vh;
  font-size: 32rpx;
  background: rgba(204, 204, 204, 0.22);
}

.popup-header image {
  width: 45rpx;
  height: 45rpx;
  padding: 10rpx;
}

.inputText {
  padding: 0rpx 30rpx;
  height: 100%;
}

.deleteMessage {
  width: 100%;
  height: 110rpx;
  line-height: 110rpx;
  color: #fff;
  font-size: 32rpx;
  text-align: center;
  border-radius: 15px;
  background: rgba(48, 184, 156, 1);
}

.deleteChat {
  width: 100%;
  height: 80rpx;
  line-height: 110rpx;
  color: rgba(174, 16, 16, 0.79);
  font-size: 32rpx;
  text-align: center;
  border-radius: 15px;
}
</style>
